<!-- 评论输入区 -->
<template>
  <div id="comment-input">
    <textarea
      ref="textarea"
      :style="{ height: height }"
      v-model="value"
      class="comment-input-inner"
      wrap="physical"
      placeholder="在此输入你的评论"
    ></textarea>
  </div>
</template>

<script>
import { calcTextareaHeight } from "../../../utils/utils";

export default {
  data() {
    return {
      value: "",
      height: "30px",
    };
  },

  props: {
    commentContent: {
      type: String,
      default: "",
    },
  },

  model: {
    prop: "commentContent",
    event: "commentContentChange",
  },

  components: {},

  computed: {},

  created() {
    this.value = this.commentContent;
  },

  methods: {
    getHeight() {
      this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
    },
  },

  watch: {
    value(newval) {
      //value为组件私有数据，commentContent为父组件传递过来数据
      this.getHeight();
      this.$emit("commentContentChange", newval);
    },
  },
};
</script>
<style>
#comment-input {
  position: relative;
  width: 100%;
  transition: all 0.4s ease;
  animation: show 0.4s ease;
}
.comment-input-inner {
  display: inline-block;
  width: 100%;
  line-height: 28px;
  font-size: 14px;
  resize: none;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px rgba(209, 223, 255, 0.728) solid;
  outline: none;
  border-radius: 4px;
  margin: 0;
  color: rgba(0, 0, 0, 0.211);
}
.comment-input-inner:focus {
  border: 1px rgb(174, 198, 255) solid;
  background-color: aliceblue;
  color: rgb(95, 95, 95);
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>